<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章列表--layui后台管理模</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/css/metroStyle/metroStyle.css">
	<script src="/layui/layui.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/jquery.ztree.all.js"></script>
	<script src="/js/config.js"></script>
</head>
<body >
<div style="margin-top: 20px">

</div>
<div class="layui-col-sm8">
<table class="layui-table" lay-filter="roleTable" lay-data="{id:'roleTable',text:{none:'没有要显示的数据'},url:'http://localhost:8888/role/list',page:true,even:true,defaultToolbar:['filter', 'print', 'exports']}">
	<thead>
			<th lay-data="{type:'radio'}"></th>
			<th lay-data="{field:'roleid'}">编号</th>
			<th lay-data="{field:'rolelabel'}">角色名称</th>
			<th lay-data="{field:'available',templet:'#checkboxTpl'}">是否启用</th>

			</thead>
		</table>
</div>
<div class="layui-col-sm3 layui-col-sm-offset1">
	<h2>显示所有的权限</h2>
	<hr>
	<ul id="treeDemo" class="ztree"></ul>
	<hr>
	<button class="layui-btn" style="width: 100%;" onclick="assignPerms();">授权</button>
</div>

<script>
    var table ;

    layui.use(['form','table'],function() {
        table = layui.table;
//监听单选按钮事件
        table.on('radio(roleTable)', function(obj){
            roleid = obj.data.roleid;
            loadPerTree(obj.data.roleid);
        });
        //监听行内的工具条
        table.on('tool(roleTable)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    layer.close(index);
                    $.post("http://localhost:8888/role/delete", {roleid: data.roleid}, function (d) {
                        table.reload("roleTable", {
                            page: {
                                curr: 1
                            }
                        });
                    });
                });
            } else if (layEvent === 'edit') {//TODO 编辑

            } else if (layEvent === 'detail') { //TODO 查看详情

            }
        });
    });

    function availableTem(d){
        if (d.available == 1){
            return "启用";
        }
        return "未启用";
    }





</script>
<SCRIPT LANGUAGE="JavaScript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        check : {
            enable : true
        }
    };

    $(document).ready(function(){
        $.get(new Config().base_url + "/permission/all002",function (zNodes) {
            for(let first of zNodes){
                first['open'] = true;
                for(let second of first.children){
                    second.open = true;
                }
            }
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

    });

    var roleid; //选中的角色编号
    /**
     * 给角色授权
     */
    function assignPerms() {
        //获取选中的节点
        var nodes = zTreeObj.getCheckedNodes();
        console.log(nodes);
        var url = new Config().base_url + "/role/assign";
        var postData = {
            roleid :roleid,
            perids : ''
        };
        $.each(nodes,function (i) {
            postData.perids += this.perid;
            if (i < nodes.length - 1){
                postData.perids += ",";
            }
        });
        $.post(url,postData,function () {
            layer.msg("角色授权成功！")
        });
    }

    /**
     * 加载角色对应的权限并显示
     */
    function loadPerTree(rid) {
        roleid=rid;
        $.get(new Config().base_url + '/permission/rolePers/'+rid,function (pers) {
            $.get(new Config().base_url + "/permission/all002",function (zNodes) {
                for(let first of zNodes){
                    first['open'] = true;
                    if($.inArray(first.perid,pers) != -1){
                        first.checked = true;
                    }

                    for(let second of first.children){
                        if($.inArray(second.perid,pers) != -1){
                            second.checked = true;
                        }
                        second.open = true;

                        for(let third of second.children){
                            if($.inArray(third.perid,pers) != -1){
                                third.checked = true;
                            }
                        }
                    }
                }
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
        });

    }
</SCRIPT>

<script type="text/html" id="checkboxTpl">

	<input type="checkbox" name="lock" value="{{d.available}}" title="启用" lay-filter="roleTable" {{ d.available == 1 ? 'checked' : '' }}>
</script>




</body>
</html>